<template>
  <div class="container">
    <div class="flex flex-wrap f-ptp10">
      <CaseTypeSelect class='f-mrt20 f-mbt10 f-w120' @getCaseType='getCaseType' placeholder='案件类型' />
      <el-input class='f-mrt20 f-mbt10 f-w120' v-model="caseId" clearable placeholder="案件编号"></el-input>
      <Region @getRegion='getRegion' class='f-mrt20 f-mbt10 f-w200' placeholder="省市选择"/>
      <el-date-picker
        class='f-mrt20 date'
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-input class='f-mrt20 f-mbt10 f-w120' v-model="userId" clearable placeholder="用户ID"></el-input>
      <el-input class='f-mrt20 f-mbt10 f-w120' v-model="userMobileNo" clearable placeholder="用户手机"></el-input>
      <el-input class='f-mrt20 f-mbt10 f-w120' v-model="lawyerName" clearable placeholder="律师姓名"></el-input>
      <el-input class='f-mrt20 f-mbt10 f-w120' v-model="lawyerMobileNo" clearable placeholder="律师电话"></el-input>
      <el-button class='f-h40 f-mrt20 f-mbt10' @click="getList" type="primary">查询</el-button>
      <el-button class='f-h40 f-mbt10' @click="showAddDialog = true" type="primary">新增案件</el-button>
    </div>
    <div>
      <el-table
        :data="caseList"
        border
        style="width: 100%">
        <el-table-column prop="caseId" label="案件编号" width="120"></el-table-column>
        <el-table-column prop="caseTypeName" label="案件类型" width="120"></el-table-column>
        <el-table-column prop="region" label="地区" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.provinceName}} {{scope.row.cityName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户ID" width="120"></el-table-column>
        <el-table-column prop="userMobileNo" label="用户手机" width="120"></el-table-column>
        <el-table-column prop="content" label="案件详情" width="100">
          <template slot-scope="scope">
            <span @click="showDetailBtnClickEvent(scope.row)" class='s-c-green f-csp'>查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="发生时间" width="140">
          <template slot-scope="scope">
            <span>{{ tranDate(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lawyerName" label="律师" width="120"></el-table-column>
        <el-table-column prop="lawyerMobileNo" label="律师电话" width="120"></el-table-column>
        <el-table-column prop="state" label="当前状态" width="120"></el-table-column>
        <el-table-column prop="manage" label="管理" width="360">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 'solving'">
              <span @click="addProgressBtnClickEvent(scope.row)" class='s-c-green f-csp f-mrt10'>添加进度</span>
              <router-link  class='s-c-green f-csp f-mrt10' :to='"/home/case/progressList/" + scope.row.id'>查看进度</router-link>
              <span @click="changeBtnClickEvent(scope.row)" class='s-c-green f-csp f-mrt10'>更换律师</span>
              <span @click="doneBtnClickEvent(scope.row)" class='s-c-green f-csp f-mrt10'>案件结束</span>
              <span @click="deleteBtnClickEvent(scope.row)" class='s-c-green f-csp'>作废</span>
            </span>
            <span v-if="scope.row.state == 'tendering'">招标中</span>
            <span v-if="scope.row.state == 'done'">已结束</span>
            <span v-if="scope.row.state == 'delete'">已作废</span>
          </template>
        </el-table-column>
      </el-table>
      <div class='f-ptp20 f-pbt20 f-oh' v-if="totalCount > 0">
        <el-pagination
          class='f-fr'
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>
    <AddCase :show='showAddDialog' @close='closeAddDialog' />
    <AddCaseProgress :caseId='addCaseProgressCaseId' :show='showAddCaseProgress' @close='closeAddCaseProgress' />

    <el-dialog
      title="查看详情"
      :visible.sync="showDetailDialog"
      width="560px"
      :before-close="beforeCloseDetailDialog">
      <span v-html="currentCase.content"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDetailDialog = false">取 消</el-button>
        <el-button type="primary" @click="showDetailDialog = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="更换律师"
      :visible.sync="showChangeLawyerDialog"
      width="560px"
      :before-close="beforeCloseChangeLawyerDialog">
      <el-form ref="changeLawyer" :model="changeLawyer" label-width="90px">
        <el-form-item label="原律师">
          <el-input disabled v-model="currentCase.lawyerName"></el-input>
        </el-form-item>
        <el-form-item label="原律师手机">
          <el-input disabled v-model="currentCase.lawyerMobileNo"></el-input>
        </el-form-item>
        <el-form-item label="律师id">
          <el-input @blur="lawyerIdIptBlurEvent" v-model="changeLawyer.lawyerId"></el-input>
        </el-form-item>
        <el-form-item label="律师姓名">
          <el-input disabled v-model="changeLawyer.lawyerName"></el-input>
        </el-form-item>
        <el-form-item label="律师手机">
          <el-input disabled v-model="changeLawyer.lawyerMobileNo"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changeLawyerSubmit">确定</el-button>
          <el-button @click="showChangeLawyerDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import CaseTypeSelect from '../../components/CaseTypeSelect';
import Region from '../../components/Region'
import AddCase from './AddCase'
import AddCaseProgress from './AddCaseProgress'
export default {
  name: 'CaseManage',
  components: {
    'CaseTypeSelect': CaseTypeSelect,
    'Region': Region,
    'AddCase': AddCase,
    'AddCaseProgress': AddCaseProgress
  },
  data() {
    return {
      addCaseProgressCaseId: '',     // 当前添加进度案件编号
      showAddCaseProgress: false,    // 显示、隐藏添加进度弹窗
      showDetailDialog: false,       // 显示、隐藏查看详情
      showAddDialog: false,          // 显示隐藏新增案件面板
      showChangeLawyerDialog: false, // 显示、隐藏更换律师面板
      region: {},
      date: '',     // 日期
      userMobileNo: '', // 用户手机号码
      userId: '',
      lawyerMobileNo: '', // 律师手机号码
      lawyerName: '',     // 律师姓名
      caseType: '',  // 案件类型id
      caseId: '', // 案件编号
      pageSize: 10,
      totalCount: 0,
      currentPage: 1,
      caseList: [],
      currentCase: {}, // 当前选择的案件信息
      isLawyerId: false,
      changeLawyer: {
        lawyerId: '',
        lawyerName: '',
        lawyerMobileNo: '',
      },
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 添加进度按钮点击事件
    addProgressBtnClickEvent(row) {
      this.addCaseProgressCaseId = row.caseId;
      this.showAddCaseProgress = true;
    },
    // 关闭添加进度弹窗
    closeAddCaseProgress() {
      this.showAddCaseProgress = false;
    },
    // 更换律师-确定按钮点击事件
    changeLawyerSubmit() {
      if(!this.isLawyerId) {
        this.$message.warning('请输入正确的律师id！');
        return;
      }
      this.updateCase({
        caseId: this.currentCase.caseId,
        lawyerId: this.changeLawyer.lawyerId
      });
    },
    // 更换律师-律师id输入框失去焦点事件
    lawyerIdIptBlurEvent() {
      this.getLawyerDetailById(this.changeLawyer.lawyerId)
    },

    // 获取律师详情
    getLawyerDetailById(lawyerId) {
      this.$store.dispatch('GET_LAWYER_BY_ID', {
        id: lawyerId
      }).then(res => {
        if(res.data.retCode == 0) {
          console.log('lawyer::', res);
          this.isLawyerId = true;
          this.changeLawyer.lawyerName = res.data.data.name;
          this.changeLawyer.lawyerMobileNo = res.data.data.mobileNo;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      });
    },
    // 查看详情弹窗关闭前操作
    beforeCloseDetailDialog() {
      this.showDetailDialog = false;
      this.currentCase = {};
    },
    // 更换律师弹窗关闭前操作
    beforeCloseChangeLawyerDialog() {
      this.currentCase = {};
      this.showChangeLawyerDialog = false;
      this.changeLawyer.lawyerId = '';
      this.changeLawyer.lawyerName = '';
      this.changeLawyer.lawyerMobileNo = '';
      this.currentCase = {};
      this.isLawyerId = false;
    },
    // 关闭新增弹窗
    closeAddDialog() {
      this.showAddDialog = false;
      this.getList();
    },
    // 日期转换
    tranDate(date) {
      return this._utils.format(date, 'yyyy-mm-dd');
    },
    // 获取案件列表
    getList() {
      const params = {
        pageNum: this.currentPage - 1,
        pageSize: this.pageSize,
        caseType: this.caseType,
        caseId: this.caseId,
        startDay: this._utils.getType(this.date) == 'Array' && this.date.length > 0 ? this._utils.format(this.date[0], 'yyyy-mm-dd') : '',
        endDay: this._utils.getType(this.date) == 'Array' && this.date.length > 0 ? this._utils.format(this.date[1], 'yyyy-mm-dd') : '',
        userId: this.userId,
        userMobileNo: this.userMobileNo,
        lawyerName: this.lawyerName,
        lawyerMobileNo: this.lawyerMobileNo
      }

      this.$store.dispatch('GET_CASE_LIST', params).then(res => {
        if(res.data.retCode == 0) {
          this.caseList = res.data.data;
          this.totalCount = res.data.totalCount;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 查看按钮点击事件
    showDetailBtnClickEvent(caseInfo) {
      console.log('caseInfo:::', caseInfo);
      this.currentCase = caseInfo;
      this.showDetailDialog = true;
    },

    // 更换律师按钮点击事件
    changeBtnClickEvent(caseInfo) {
      this.currentCase = caseInfo;
      this.showChangeLawyerDialog = true;
    },

    // 结束案件按钮点击事件
    doneBtnClickEvent(caseInfo) {
      this.$confirm('确定结束该案件？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateCase({
          caseId: caseInfo.caseId,
          state: 'done'
        });
      })
    },

    // 作废按钮点击事件
    deleteBtnClickEvent(caseInfo) {
      console.log('delete', caseInfo);
      this.$confirm('确定作废改案件？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateCase({
          caseId: caseInfo.caseId,
          state: 'delete'
        });
      })
    },

    // 案件管理-更换律师/案件结束/作废
    updateCase(params) { 
      this.$store.dispatch('UPDATE_CASE', params).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('成功！');
          this.showChangeLawyerDialog = false;
          this.getList();
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      }) 
    },

    // 获取省市
    getRegion(obj) {
      this.region = obj;
    },

    getCaseType(caseType) {
      this.caseType = caseType;
    },

    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top{
  /* display: flex; */
  overflow: hidden;
  padding: 10px 0;
}
.top-item{
  float: left;
  margin-right: 20px;
}
.w-120{
  width: 120px;
}
.w-200{
  width: 200px;
}
</style>
